<template>
  <div class="upload-container" style="
    width: 148px;
    float: left;
    margin: 10px;">
    <!-- <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
      上传图片
    </el-button> -->
    <div class="avatar-uploader el-upload avatar-uploader-icon" @click=" dialogVisible=true">
<!--      <i class="el-icon-plus"/>-->
      <span>批量上传图片</span>
    </div>
    <el-dialog :visible.sync="dialogVisible" @open="open" :modal-append-to-body='false' append-to-body>
      <el-upload
        drag
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        class="editor-slide-upload"
        :action="uploadUrl"
        :data="{'isWatermark':'1'}"
        list-type="picture-card"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" style="margin-top: -116px">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-button @click="dialogVisible = false">
        取 消
      </el-button>
      <el-button type="primary" @click="handleSubmit">
        确 定
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'

export default {
  name: 'MultipleSource',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      uploadUrl:process.env.VUE_APP_BASE_API+"common/upload",
    }
  },
  methods: {


    open(){
      this.fileList = []
      this.listObj = []
    },
    checkAllSuccess() {
      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit() {
      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
      if (!this.checkAllSuccess()) {
        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
        return
      }
      this.$emit('successCBK', arr)
      this.listObj = {}
      this.fileList = []
      this.dialogVisible = false
    },
    handleSuccess(response, file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          this.listObj[objKeyArr[i]].url = response.data.imgUrl
          this.listObj[objKeyArr[i]].imgUrlWithWatermark = response.data.imgUrlWithWatermark
          this.listObj[objKeyArr[i]].hasSuccess = true
          return
        }
      }
    },
    handleRemove(file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          delete this.listObj[objKeyArr[i]]
          return
        }
      }
    },
    beforeUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf('.')+1);
      if (file.size / (1024 * 1024) > 500) {   // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于500M`)
        return false
      }
      let  whiteList =['bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp','avif','apng'];
      if (whiteList.indexOf(fileType) === -1) {
        this.$message({
          message: '文件格式错误，请上传正确的图片格式',
          type: 'error',
          duration: 2000
        });
        return Promise.reject(false);
      }
      const _self = this
      const fileNameUuid = file.uid
      _self.listObj[fileNameUuid] = {}
      _self.listObj[fileNameUuid] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  ::v-deep .el-upload--picture-card {
    width: 100%;
  }
}

.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
  margin-left: 5px;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 19px;
  color: #8c939d;
  width: 148px;
  height: 31px;
  line-height: 31px;
  text-align: center;

  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>

<style>
.el-upload-dragger{
  width: 100%;
  height: 146px;
}
</style>
